<template>
  <div>
    <v-card style="height: 100vh">
      <v-toolbar id="test" color="#E91E63" dark flat>
        <v-app-bar-nav-icon></v-app-bar-nav-icon>

        <v-toolbar-title>云点餐</v-toolbar-title>

        <v-spacer></v-spacer>

        <v-btn icon>
          <v-icon>mdi-magnify</v-icon>
        </v-btn>

        <v-btn icon>
          <v-icon>mdi-dots-vertical</v-icon>
        </v-btn>

        <template v-slot:extension>
          <v-tabs v-model="tab" align-with-title>
            <v-tabs-slider color="yellow"></v-tabs-slider>

            <v-tab v-for="item in items" :key="item">
              {{ item }}
            </v-tab>
          </v-tabs>
        </template>
      </v-toolbar>

      <v-card style="text-align: center" flat>
        <div class="text-center;">
          <br />
          <span
            :key="index"
            v-for="(item, index) in this.optionCircle.series[0].data"
          >
            <v-chip
              style="margin-top: 5px"
              v-if="map[item.name]"
              class="ma-2"
              close
              color="#F06292"
              text-color="#FFF"
              @click:close="deleteTheMenuItem(item, index)"
            >
              {{ item.name }}
            </v-chip>
            &nbsp;
          </span>
        </div>
        <br />
        <v-divider></v-divider>
        <!-- 主页 -->
        <div
          ref="myChartCircle"
          id="chartCircle"
          :style="{ margin: 'auto', width: '300px', height: '300px' }"
        ></div>

        <!-- 判断吃什么的点击按钮 -->
        <v-btn
          style="position: absolute; right: 5%; margin-top: -45px"
          class="mx-2"
          @click="pickItemRandomly"
          fab
          color="#F06292"
        >
          <v-icon color="#FFF"> mdi-cached </v-icon>
        </v-btn>

        <v-btn
          v-show="this.optionCircle.series[0].data.length === 0"
          style="position: fixed; left: 5%; margin-top: -30px"
          class="mx-2"
          @click="reload"
          dark
          color="#F48FB1"
        >
          重置菜单
        </v-btn>
        <v-btn class="ma-2" text icon color="blue lighten-2">
          <v-icon>mdi-thumb-up</v-icon>
        </v-btn>

        <strong style="font-size: 15px">那就吃：</strong>
        <span style="color: #4fc3f7; font-size: 26px">{{ result }}</span>

        <v-divider></v-divider>

        <span v-for="(item, index) in recom" :key="index">
          <v-chip
            style="margin: 5px 5px"
            class="ma-2"
            color="#64B5F6"
            label
            text-color="#FFF"
            @click="addFromRecom(item, index)"
            ><v-icon left> mdi-label </v-icon>
            {{ item }}
          </v-chip>
        </span>
        <v-row style="padding: 10px">
          <v-col cols="12">
            <v-text-field
              shaped
              dense
              filled
              label="我还想吃..."
              append-icon="mdi-food-fork-drink"
              v-model="newMenuItem"
              @click:append="addMenuItem"
            ></v-text-field
          ></v-col>
        </v-row>
      </v-card>
    </v-card>
  </div>
</template>

<script>
export default {
  data() {
    return {
      myChart: {},
      num: 0,
      result: "",
      newMenuItem: "",
      map: {},
      optionCircle: {
        title: {
          text: "你来决定吃什么",
          subtext: "右边旋转按钮随机选择.",
          left: "center",
        },
        tooltip: {
          trigger: "item",
        },
        // legend: {
        //   orient: "vertical",
        //   left: "left",
        // },
        series: [
          {
            name: "我的最爱",
            type: "pie",
            radius: "50%",
            data: [],
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: "rgba(0, 0, 0, 0.5)",
              },
            },
          },
        ],
      },
      tab: null,
      items: ["主页", "待续.."],
      recom: [],
    };
  },
  watch: {
    optionCircle: {
      deep: true,
      handler: function (newVal, oldVal) {
        if (newVal) {
          let newData = newVal.series[0].data;
          this.set("data", newData);
        } else {
          let oldData = oldVal.series[0].data;
          this.set("data", oldData);
        }
      },
    },
    map: {
      deep: true,
      handler: function (newVal, oldVal) {
        if (newVal) {
          this.set("map", newVal);
        } else {
          this.set("map", oldVal);
        }
      },
    },
  },
  methods: {
    //从推荐中添加
    addFromRecom(item, index) {
      let newList = this.optionCircle.series[0].data.filter(
        (i) => i.name === item
      );

      if (newList.length > 0) {
        return;
      } else {
        this.optionCircle.series[0].data.push({
          name: item,
          value: 1,
        });

        this.map[item] = true;
        this.set("map", this.map);
        this.drawLine();
      }
    },
    //重置菜单
    reload() {
      location.reload();
    },
    pickItemRandomly() {
      let data = this.optionCircle.series[0].data;
      let max = data.length;
      //生成一个[0~length-1]的随机数
      let numRand = parseInt(Math.random() * max, 10);
      //随机选中一个测试
      this.drawLine(numRand);
    },
    addMenuItem() {
      let inputItem = this.newMenuItem.trim();
      if (inputItem === "") {
        return;
      }

      let data = this.optionCircle.series[0].data;
      //过滤 是否data已存在输入的值
      let newList = this.optionCircle.series[0].data.filter(
        (item) => item.name === inputItem
      );
      let length = newList.length;

      //如果之前没有存在
      if (length === 0) {
        data.push({
          name: this.newMenuItem,
          value: 1,
        });
        this.map[inputItem] = true;
        this.newMenuItem = "";
        this.drawLine();
      } else {
        this.newMenuItem = "";
        return;
      }
    },
    set(key, value) {
      localStorage.setItem(key, JSON.stringify(value));
    },
    get(key) {
      return JSON.parse(localStorage.getItem(key));
    },
    //从圆盘中删除某一项
    deleteTheMenuItem(item, index) {
      //首先让这一个标签消失
      this.map[item.name] = false;
      let deletedName = item.name;
      this.optionCircle.series[0].data =
        this.optionCircle.series[0].data.filter(
          (item) => item.name !== deletedName
        );
      this.drawLine();
    },
    //使得index值的区域为选中状态
    selectOnePiece(index) {
      this.drawLine(index);
    },
    drawLine(index) {
      let myChartCircle = this.$echarts.getInstanceByDom(
        document.getElementById("chartCircle")
      );

      if (myChartCircle == null) {
        // 如果不存在，就进行初始化。
        myChartCircle = this.$echarts.init(
          document.getElementById("chartCircle")
        );
      }

      if (index >= 0) {
        myChartCircle.setOption(this.optionCircle);
        myChartCircle.dispatchAction({
          type: "highlight",
          seriesIndex: 0,
          dataIndex: index,
        });

        this.result = this.optionCircle.series[0].data[index].name;
        setTimeout(() => {
          //一秒钟重新渲染echarts
          myChartCircle.dispatchAction({
            type: "downplay",
            seriesIndex: 0,
            dataIndex: index,
          });
        }, 1000);
      } else {
        myChartCircle.setOption(this.optionCircle);
      }
    },
    initData() {
      let mapMenu = new Object();
      let arr = new Array(
        "懒人焖饭",
        "牛肉米线",
        "干拌面",
        "烤肉饭",
        "番茄鸡蛋炒刀削"
      );
      for (let i = 0; i < arr.length; i++) {
        this.optionCircle.series[0].data.push({
          name: arr[i],
          value: 1,
        });
        mapMenu[arr[i]] = true;
      }

      this.map = mapMenu;
      let recom = new Array(
        "渔粉米线",
        "鸡公煲",
        "曹氏烫菜",
        "冒菜",
        "刘二娃串串香",
        "醪糟小汤圆",
        "三食堂盘盘餐"
      );
      this.recom = recom;
      //加载到localStorage中 防止用户没有其他操作 直接刷新
      this.set("data", this.optionCircle.series[0].data);
      this.set("map", this.map);
      this.set("recom", this.recom);
    },
    rotate() {
      let myChartCircle = this.$echarts.getInstanceByDom(
        document.getElementById("chartCircle")
      );
      myChartCircle.setOption(this.optionCircle);
      let data = this.optionCircle.series[0].data;

      setTimeout(() => {}, 200);
    },
  },
  mounted() {
    //适合于变化后的再渲染 数据不能再回到初始化
    //而是渲染localStorage中的内容
    let data = this.get("data");
    let map = this.get("map");
    let recom = this.get("recom");

    if (data === null) {
      this.initData();
    } else {
      if (data.length === 0) {
        this.initData();
      } else {
        this.optionCircle.series[0].data = data;
        this.map = map;
        this.recom = recom;
      }
    }
    this.drawLine();
    this.rotate();
  },
};
</script>

<style scoped>
html {
  overflow: hidden;
}
#result {
  color: #00bcd4;
  font-size: 26px;
}
</style>